<template>
  <div class="page-container-padding">
    <div>
      <span>记录状态：</span>
      <span>
        <el-select v-model="recordData.state" size="mini">
          <el-option :value="1" label="待处理"></el-option>
          <el-option :value="2" label="已完成"></el-option>
        </el-select>
      </span>
      <span style="margin-left: 8px">
        <el-button type="primary" size="mini" @click="toQueryData">
          查询
        </el-button>
      </span>
    </div>
    <div style="color: #f43e2f; font-size: 12px; margin: 6px 0">
      提示：只要上传了附件材料，则归档为[已完成]状态。
    </div>
    <div>
      <el-table
        :data="recordData.data"
        border
        stripe
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @expand-change="expandChangeHandler"
      >
        <el-table-column label="详细" type="expand" width="70">
          <template #default="scope">
            <div style="display: flex">
              <div style="padding-left: 70px; width: 500px">
                <el-form label-width="70">
                  <el-form-item label="材料说明：">
                    {{ scope.row.content }}
                  </el-form-item>
                </el-form>
              </div>
              <!-- 传材料 -->
              <div style="width: 500px">
                <el-form label-width="70" label-position="left">
                  <el-form-item label="材料附件：">
                    <span v-if="expandRow.annex_url">
                      <a :href="expandRow.annex_url" target="_blank">
                        {{ expandRow.annex_filename }}
                      </a>
                      <span v-if="expandRow.is_public" style="margin-left: 8px">
                        (已外发)
                      </span>
                    </span>
                    <span v-else>
                      {{ expandRow.annex_filename }}
                    </span>
                  </el-form-item>
                  <el-form-item v-if="scope.row.state < 2" label="选择附件：">
                    <div style="display: flex">
                      <el-upload
                        action="''"
                        :before-upload="() => false"
                        :multiple="false"
                        :on-change="annexChange"
                      >
                        <span style="color: #349cfc">
                          <i class="el-icon-upload"></i>
                          点击选择
                        </span>
                      </el-upload>
                      <el-checkbox
                        v-model="expandRow.is_public"
                        style="margin-left: 22px"
                      >
                        是否外发营业部
                      </el-checkbox>
                    </div>
                  </el-form-item>
                  <el-form-item v-if="scope.row.state < 2">
                    <el-button
                      type="primary"
                      size="mini"
                      style="margin-left: 70px"
                      :loading="annexUploading"
                      @click="toUploadAnnex(scope.row)"
                    >
                      确定保存
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="admin_name"
          label="申请人"
          width="160px"
          show-overflow-tooltip
        />
        <el-table-column prop="create_time" label="创建时间" width="160" />
        <el-table-column prop="title" label="材料主题" />
        <el-table-column prop="data_type" label="材料类型" />
        <el-table-column prop="use_to" label="材料用途" show-overflow-tooltip />
        <el-table-column prop="finish_time" label="完成时间" width="160" />
        <el-table-column
          show-overflow-tooltip
          prop="link_msg"
          label="联系方式"
        />
        <el-table-column label="状态" width="70">
          <template #default="scope">
            <div :class="scope.row.state < 0 ? 'red' : 'green'">
              {{ scope.row.state_text }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码器 -->
    <div style="margin-top: 8px">
      <el-pagination
        style="margin-top: 5px"
        background
        hide-on-single-page
        :current-page="recordData.page"
        :page-size="recordData.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="recordData.totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    QueryDataNeedToMe,
    FinishAnnexdataNeedToMe,
  } from '@/api/prodService/dataNeed'
  export default {
    data() {
      return {
        recordData: {
          data: [],
          page: 1,
          pageSize: 30,
          state: 1,
          totalCount: 0,
        },
        expandRow: {
          record_id: -1,
          row_state: 2,
          annex_file: null,
          annex_filename: '',
          annex_url: '',
          is_public: false,
        },
        expands: [],
        annexUploading: false,
      }
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      getTableData() {
        QueryDataNeedToMe(
          this.recordData.page,
          this.recordData.pageSize,
          this.recordData.state
        ).then((res) => {
          // console.log(res)
          const data = res.data
          this.recordData.data = data.data
          this.recordData.page = data.page
          this.recordData.totalCount = data.total_count
        })
      },
      currentPageChanged(page) {
        this.recordData.page = page
      },
      toQueryData() {
        this.recordData.page = 1
        this.getTableData()
      },
      getRowKeys(row) {
        return row.id
      },
      // 展开的事件
      expandChangeHandler(row, expandedRows) {
        if (expandedRows.length) {
          this.expands = []
          if (row) {
            this.expands.push(row.id)
            this.expandRow.record_id = row.id
            this.expandRow.annex_file = null
            this.expandRow.annex_filename = row.annex_name || ''
            this.expandRow.annex_url = row.annex_url || null
            this.expandRow.is_public = row.annex_public || false
          }
        } else {
          this.expands = []
        }
      },

      // 附件选择改变
      annexChange(file) {
        // console.log(file)
        const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (['pdf', 'doc', 'docx', 'ppt', 'pptx'].indexOf(fileSuffix) < 0) {
          this.$baseMessage('只能上传pdf,docx,pptx类型的文件!', 'error')
          return
        }
        this.expandRow.annex_file = file.raw
        this.expandRow.annex_filename = file.name
      },

      // 上传附件
      toUploadAnnex() {
        if (this.expandRow.record_id !== this.expands[0]) {
          this.$baseMessage('程序内部错误,操作对象ID ERROR!', 'error')
          return
        }
        // 分析报告有附件
        if (!this.expandRow.annex_file) {
          this.$baseMessage('您还未选择附件文件!', 'error')
          return
        }
        this.annexUploading = true
        let dataForm = new FormData()
        dataForm.append('rid', this.expandRow.record_id)
        if (this.expandRow.annex_file) {
          dataForm.append('annex', this.expandRow.annex_file)
          dataForm.append('annex_public', this.expandRow.is_public)
        }
        FinishAnnexdataNeedToMe(dataForm).then((res) => {
          // console.log(res)
          this.$baseMessage(res.msg, 'success')
          this.getTableData()
          this.annexUploading = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .green {
    color: #0dd068;
  }
  .red {
    color: #e74736;
  }
  .el-table ::v-deep .el-table__expand-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-table ::v-deep .el-table__expand-icon .el-icon-arrow-right:before {
    content: "\e6d9";
    // border: 1px solid #ccc;
    // padding: 2px;
    font-weight: 700;
    color: #f74e1e;
  }

  .el-table ::v-deep .el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: "\e6d8";
  }
</style>
